<template>
  <div class="profile-page">
    <!-- 用户信息卡片 -->
    <div class="user-info-card">
      <div class="user-avatar-section">
        <div class="avatar-wrapper">
          <img 
            :src="userAvatar" 
            :alt="user?.nickname" 
            class="user-avatar"
            @error="handleAvatarError"
          />
          <div class="avatar-upload" @click="uploadAvatar">
            <i class="icon-camera"></i>
          </div>
        </div>
        <div class="user-basic-info">
          <h2 class="username">{{ user?.nickname || '未设置昵称' }}</h2>
          <div class="user-level">
            <span class="level-badge">Lv{{ user?.level || 1 }}</span>
            <span class="vip-badge" v-if="isVip" :class="user?.vipStatus">
              {{ vipStatusText }}
            </span>
          </div>
          <p class="user-email">{{ user?.email }}</p>
          <p class="join-time">{{ formatJoinTime }}</p>
        </div>
      </div>
      
      <!-- 用户统计 -->
      <div class="user-stats">
        <div class="stat-item">
          <div class="stat-value">{{ user?.booksRead || 0 }}</div>
          <div class="stat-label">已读书籍</div>
        </div>
        <div class="stat-item">
          <div class="stat-value">{{ formatReadingTime }}</div>
          <div class="stat-label">阅读时长</div>
        </div>
        <div class="stat-item">
          <div class="stat-value">{{ bookshelf.length }}</div>
          <div class="stat-label">书架书籍</div>
        </div>
        <div class="stat-item">
          <div class="stat-value">{{ user?.balance || 0 }}</div>
          <div class="stat-label">书币余额</div>
        </div>
      </div>

      <!-- 编辑资料按钮 -->
      <button class="btn primary edit-profile-btn" @click="showEditDialog = true">
        编辑资料
      </button>
    </div>

    <!-- 功能卡片网格 -->
    <div class="function-grid">
      <!-- 我的书架 -->
      <div class="function-card" @click="safeNavigate('/bookshelf')">
        <div class="card-icon bookshelf">
          <i class="icon-book"></i>
        </div>
        <div class="card-content">
          <h3>我的书架</h3>
          <p>{{ bookshelf.length }}本书籍</p>
          <span class="card-arrow">→</span>
        </div>
      </div>

      <!-- 我的钱包 -->
      <div class="function-card" @click="safeNavigate('/wallet')">
        <div class="card-icon wallet">
          <i class="icon-wallet"></i>
        </div>
        <div class="card-content">
          <h3>我的钱包</h3>
          <p>{{ user?.balance || 0 }}书币</p>
          <span class="card-arrow">→</span>
        </div>
      </div>

      <!-- 阅读历史 -->
      <div class="function-card" @click="showReadingHistory = true">
        <div class="card-icon history">
          <i class="icon-history"></i>
        </div>
        <div class="card-content">
          <h3>阅读历史</h3>
          <p>{{ readingHistory.length }}条记录</p>
          <span class="card-arrow">→</span>
        </div>
      </div>

      <!-- 阅读设置 -->
      <div class="function-card" @click="showReaderSettings = true">
        <div class="card-icon settings">
          <i class="icon-settings"></i>
        </div>
        <div class="card-content">
          <h3>阅读设置</h3>
          <p>个性化阅读体验</p>
          <span class="card-arrow">→</span>
        </div>
      </div>

      <!-- VIP会员 -->
      <div class="function-card vip-card" @click="showVipDialog = true" v-if="!isVip">
        <div class="card-icon vip">
          <i class="icon-crown"></i>
        </div>
        <div class="card-content">
          <h3>开通VIP</h3>
          <p>享受更多特权</p>
          <span class="card-arrow">→</span>
        </div>
      </div>

      <!-- 我的评论 -->
      <div class="function-card">
        <div class="card-icon comment">
          <i class="icon-comment"></i>
        </div>
        <div class="card-content">
          <h3>我的评论</h3>
          <p>查看所有评论</p>
          <span class="card-arrow">→</span>
        </div>
      </div>
    </div>

    <!-- 最近阅读 -->
    <div class="recent-reading" v-if="recentBooks.length > 0">
      <h3 class="section-title">最近阅读</h3>
      <div class="recent-books">
        <div 
          class="book-item" 
          v-for="book in recentBooks" 
          :key="book.id"
          @click="$router.push(`/novel/${book.novelId}`)"
        >
          <img :src="book.novel.cover" :alt="book.novel.title" class="book-cover" />
          <div class="book-info">
            <h4 class="book-title">{{ book.novel.title }}</h4>
            <p class="book-author">{{ book.novel.author }}</p>
            <p class="read-progress">阅读进度: {{ Math.round(book.readProgress * 100) }}%</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 编辑资料对话框 -->
    <div class="dialog-overlay" v-if="showEditDialog" @click="closeEditDialog">
      <div class="dialog" @click.stop>
        <div class="dialog-header">
          <h3>编辑资料</h3>
          <button class="close-btn" @click="closeEditDialog">×</button>
        </div>
        <div class="dialog-content">
          <form @submit.prevent="updateProfile">
            <div class="form-group">
              <label>昵称</label>
              <input v-model="editForm.nickname" type="text" placeholder="请输入昵称" required />
            </div>
            <div class="form-group">
              <label>邮箱</label>
              <input v-model="editForm.email" type="email" placeholder="请输入邮箱" required />
            </div>
            <div class="form-actions">
              <button type="button" class="btn secondary" @click="closeEditDialog">
                取消
              </button>
              <button type="submit" class="btn primary" :disabled="updating">
                {{ updating ? '更新中...' : '保存' }}
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>

    <!-- 阅读历史对话框 -->
    <div class="dialog-overlay" v-if="showReadingHistory" @click="closeReadingHistory">
      <div class="dialog large" @click.stop>
        <div class="dialog-header">
          <h3>阅读历史</h3>
          <button class="close-btn" @click="closeReadingHistory">×</button>
        </div>
        <div class="dialog-content">
          <div class="history-list" v-if="readingHistory.length > 0">
            <div 
              class="history-item" 
              v-for="item in readingHistory" 
              :key="item.id"
              @click="$router.push(`/novel/${item.novelId}`)"
            >
              <img :src="item.novel.cover" :alt="item.novel.title" class="history-cover" />
              <div class="history-info">
                <h4>{{ item.novel.title }}</h4>
                <p>{{ item.chapter.title }}</p>
                <span class="read-time">{{ formatTime(item.readTime) }}</span>
              </div>
            </div>
          </div>
          <div class="empty-state" v-else>
            <p>暂无阅读历史</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 阅读设置对话框 -->
    <div class="dialog-overlay" v-if="showReaderSettings" @click="closeReaderSettings">
      <div class="dialog" @click.stop>
        <div class="dialog-header">
          <h3>阅读设置</h3>
          <button class="close-btn" @click="closeReaderSettings">×</button>
        </div>
        <div class="dialog-content">
          <div class="settings-group">
            <h4>字体设置</h4>
            <div class="setting-item">
              <label>字体大小</label>
              <div class="font-size-control">
                <button @click="adjustFontSize(-1)">A-</button>
                <span>{{ readerSettings.fontSize }}px</span>
                <button @click="adjustFontSize(1)">A+</button>
              </div>
            </div>
            <div class="setting-item">
              <label>行间距</label>
              <input 
                type="range" 
                min="1.2" 
                max="2.0" 
                step="0.1" 
                v-model="readerSettings.lineHeight"
                @change="saveReaderSettings"
              />
              <span>{{ readerSettings.lineHeight }}</span>
            </div>
          </div>
          
          <div class="settings-group">
            <h4>主题设置</h4>
            <div class="theme-options">
              <div 
                class="theme-option"
                :class="{ active: readerSettings.backgroundColor === '#ffffff' }"
                @click="setTheme('#ffffff', '#333333')"
              >
                <div class="theme-preview light"></div>
                <span>日间模式</span>
              </div>
              <div 
                class="theme-option"
                :class="{ active: readerSettings.backgroundColor === '#1a1a1a' }"
                @click="setTheme('#1a1a1a', '#e0e0e0')"
              >
                <div class="theme-preview dark"></div>
                <span>夜间模式</span>
              </div>
              <div 
                class="theme-option"
                :class="{ active: readerSettings.backgroundColor === '#f5f5dc' }"
                @click="setTheme('#f5f5dc', '#333333')"
              >
                <div class="theme-preview sepia"></div>
                <span>护眼模式</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- VIP开通对话框 -->
    <div class="dialog-overlay" v-if="showVipDialog" @click="closeVipDialog">
      <div class="dialog vip-dialog" @click.stop>
        <div class="dialog-header">
          <h3>🎉 开通VIP会员</h3>
          <button class="close-btn" @click="closeVipDialog">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
              <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
            </svg>
          </button>
        </div>
        <div class="dialog-content">
          <div class="vip-packages">
            <div class="vip-package" @click="selectVipPackage('monthly')">
              <h4>月度VIP</h4>
              <div class="price">¥15/月</div>
              <div class="benefits">
                <p>• 免费阅读VIP章节</p>
                <p>• 无广告阅读体验</p>
                <p>• 专属VIP标识</p>
              </div>
            </div>
            <div class="vip-package popular" @click="selectVipPackage('yearly')">
              <div class="popular-badge">最受欢迎</div>
              <h4>年度VIP</h4>
              <div class="price">¥150/年</div>
              <div class="original-price">原价 ¥180</div>
              <div class="benefits">
                <p>• 月度VIP所有特权</p>
                <p>• 每月赠送100书币</p>
                <p>• 专属客服支持</p>
                <p>• 提前阅读新书</p>
              </div>
            </div>
          </div>
          
          <div class="dialog-footer">
            <button class="btn secondary" @click="closeVipDialog">取消</button>
            <button class="btn primary" @click="handleVipPurchase">立即开通</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { Message } from '@/utils/toast'
import { useUserStore } from '@/stores/user'
import { useRouter } from 'vue-router'
import { debounce, throttle } from '@/utils/debounce'

const userStore = useUserStore()
const router = useRouter()

// 响应式数据
const showEditDialog = ref(false)
const showReadingHistory = ref(false)
const showReaderSettings = ref(false)
const showVipDialog = ref(false)
const updating = ref(false)

// 移除unused变量

// 简单的点击防护
const lastClickTime = ref(0)
const CLICK_THROTTLE_TIME = 1000 // 1秒防抖

// 防抖的弹窗关闭方法 - 简化，只对必要的操作使用防抖
const closeEditDialog = () => {
  showEditDialog.value = false
}

const closeReadingHistory = () => {
  showReadingHistory.value = false
}

const closeReaderSettings = () => {
  showReaderSettings.value = false
}

const closeVipDialog = () => {
  showVipDialog.value = false
}

// 安全的路由跳转方法 - 使用简单的时间防护
const safeNavigate = async (path: string) => {
  const now = Date.now()
  if (now - lastClickTime.value < CLICK_THROTTLE_TIME) {
    return
  }
  lastClickTime.value = now
  
  try {
    await router.push(path)
  } catch (error) {
    console.error('导航失败:', error)
  }
}

const handleVipPurchase = () => {
  // 跳转到VIP页面
  safeNavigate('/vip')
  closeVipDialog()
}

const editForm = ref({
  nickname: '',
  email: ''
})

// 计算属性
const user = computed(() => userStore.user)
const isVip = computed(() => userStore.isVip)
const bookshelf = computed(() => userStore.bookshelf)
const readingHistory = computed(() => userStore.readingHistory)
const readerSettings = computed(() => userStore.readerSettings)

const userAvatar = computed(() => {
  return user.value?.avatar || '/default-avatar.svg'
})

const vipStatusText = computed(() => {
  if (!user.value?.vipStatus || user.value.vipStatus === 'none') return ''
  return user.value.vipStatus === 'monthly' ? '月度VIP' : '年度VIP'
})

const formatJoinTime = computed(() => {
  if (!user.value?.createdAt) return ''
  const date = new Date(user.value.createdAt)
  return `${date.getFullYear()}年${date.getMonth() + 1}月加入`
})

const formatReadingTime = computed(() => {
  const hours = Math.floor((user.value?.readingTime || 0) / 60)
  return hours > 0 ? `${hours}小时` : '0小时'
})

const recentBooks = computed(() => {
  return bookshelf.value.slice(0, 3)
})

// 方法
const handleAvatarError = (event: Event) => {
  const target = event.target as HTMLImageElement
  target.src = '/default-avatar.svg'
}

const uploadAvatar = () => {
  // 这里实现头像上传逻辑
  console.log('上传头像')
}

const updateProfile = debounce(async () => {
  if (!editForm.value.nickname.trim()) {
    Message.error('请输入昵称')
    return
  }
  
  if (updating.value) return
  
  updating.value = true
  try {
    userStore.updateUserInfo({
      nickname: editForm.value.nickname,
      email: editForm.value.email
    })
    
    Message.success('资料更新成功')
    
    // 延迟关闭弹窗，让用户看到成功提示
    setTimeout(() => {
      showEditDialog.value = false
    }, 500)
  } catch (error) {
    Message.error('更新失败，请重试')
  } finally {
    updating.value = false
  }
}, 300)

const adjustFontSize = (delta: number) => {
  const newSize = readerSettings.value.fontSize + delta
  if (newSize >= 12 && newSize <= 24) {
    userStore.updateReaderSettings({ fontSize: newSize })
  }
}

const saveReaderSettings = () => {
  userStore.updateReaderSettings(readerSettings.value)
}

const setTheme = (backgroundColor: string, textColor: string) => {
  userStore.updateReaderSettings({
    backgroundColor,
    textColor,
    nightMode: backgroundColor === '#1a1a1a'
  })
}

const selectVipPackage = debounce(async (packageType: string) => {
  const price = packageType === 'monthly' ? 15 : 150
  try {
    // 模拟开通VIP
    userStore.updateUserInfo({
      vipStatus: packageType as 'monthly' | 'yearly',
      vipExpireDate: new Date(Date.now() + (packageType === 'monthly' ? 30 : 365) * 24 * 60 * 60 * 1000).toISOString()
    })
    
    Message.success(`${packageType === 'monthly' ? '月度' : '年度'}VIP开通成功！`)
    
    // 延迟关闭弹窗
    setTimeout(() => {
      showVipDialog.value = false
    }, 500)
  } catch (error) {
    Message.error('开通失败，请重试')
  }
}, 500)

const formatTime = (timeString: string) => {
  const date = new Date(timeString)
  return `${date.getMonth() + 1}月${date.getDate()}日 ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`
}

// 生命周期
onMounted(() => {
  if (user.value) {
    editForm.value = {
      nickname: user.value.nickname,
      email: user.value.email
    }
  }
  
  // 获取最新的书架数据
  if (user.value?.id) {
    userStore.fetchBookshelf()
  }
})
</script>

<style lang="scss" scoped>
.profile-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: var(--spacing-lg);

  @media (max-width: 768px) {
    padding: var(--spacing-md);
  }
}

// 用户信息卡片
.user-info-card {
  background: var(--bg-primary);
  border-radius: var(--radius-xl);
  padding: var(--spacing-2xl);
  margin-bottom: var(--spacing-xl);
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 120px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    opacity: 0.1;
  }

  .user-avatar-section {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-xl);
    margin-bottom: var(--spacing-xl);
    position: relative;
    z-index: 1;

    @media (max-width: 768px) {
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: var(--spacing-lg);
    }
  }

  .avatar-wrapper {
    position: relative;
    flex-shrink: 0;

    .user-avatar {
      width: 120px;
      height: 120px;
      border-radius: 50%;
      object-fit: cover;
      border: 4px solid white;
      box-shadow: var(--shadow-md);
    }

    .avatar-upload {
      position: absolute;
      bottom: 0;
      right: 0;
      width: 36px;
      height: 36px;
      background: var(--primary-color);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      color: white;
      transition: all 0.3s ease;

      &:hover {
        background: var(--primary-dark);
        transform: scale(1.1);
      }
    }
  }

  .user-basic-info {
    flex: 1;

    .username {
      font-size: var(--font-size-2xl);
      font-weight: 600;
      color: var(--text-primary);
      margin-bottom: var(--spacing-sm);
    }

    .user-level {
      display: flex;
      align-items: center;
      gap: var(--spacing-sm);
      margin-bottom: var(--spacing-md);

      @media (max-width: 768px) {
        justify-content: center;
      }

      .level-badge {
        background: linear-gradient(135deg, #fbbf24, #f59e0b);
        color: white;
        padding: 4px 12px;
        border-radius: 12px;
        font-size: var(--font-size-sm);
        font-weight: 500;
      }

      .vip-badge {
        padding: 4px 12px;
        border-radius: 12px;
        font-size: var(--font-size-sm);
        font-weight: 500;
        color: white;

        &.monthly {
          background: linear-gradient(135deg, #8b5cf6, #7c3aed);
        }

        &.yearly {
          background: linear-gradient(135deg, #f59e0b, #d97706);
        }
      }
    }

    .user-email, .join-time {
      color: var(--text-secondary);
      font-size: var(--font-size-sm);
      margin-bottom: var(--spacing-xs);
    }
  }

  .user-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);

    @media (max-width: 768px) {
      grid-template-columns: repeat(2, 1fr);
      gap: var(--spacing-md);
    }

    .stat-item {
      text-align: center;
      padding: var(--spacing-md);
      background: rgba(102, 126, 234, 0.05);
      border-radius: var(--radius-lg);
      transition: all 0.3s ease;

      &:hover {
        background: rgba(102, 126, 234, 0.1);
        transform: translateY(-2px);
      }

      .stat-value {
        font-size: var(--font-size-xl);
        font-weight: 600;
        color: var(--primary-color);
        margin-bottom: var(--spacing-xs);
      }

      .stat-label {
        font-size: var(--font-size-sm);
        color: var(--text-secondary);
      }
    }
  }

  .edit-profile-btn {
    position: absolute;
    top: var(--spacing-lg);
    right: var(--spacing-lg);
  }
}

// 功能卡片网格
.function-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-xl);

  @media (max-width: 768px) {
    grid-template-columns: 1fr;
  }

  .function-card {
    background: var(--bg-primary);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: var(--shadow-sm);
    position: relative;
    overflow: hidden;

    &:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-lg);
    }

    &.vip-card {
      background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
      color: white;

      .card-content h3,
      .card-content p {
        color: white;
      }
    }

    .card-icon {
      width: 60px;
      height: 60px;
      border-radius: var(--radius-md);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      color: white;
      flex-shrink: 0;

      &.bookshelf { background: linear-gradient(135deg, var(--primary-color), var(--primary-dark)); }
      &.wallet { background: linear-gradient(135deg, #10b981, #059669); }
      &.history { background: linear-gradient(135deg, #8b5cf6, #7c3aed); }
      &.settings { background: linear-gradient(135deg, #6b7280, #4b5563); }
      &.vip { background: linear-gradient(135deg, #f59e0b, #d97706); }
      &.comment { background: linear-gradient(135deg, #ef4444, #dc2626); }
    }

    .card-content {
      flex: 1;

      h3 {
        font-size: var(--font-size-lg);
        font-weight: 600;
        color: var(--text-primary);
        margin-bottom: var(--spacing-xs);
      }

      p {
        color: var(--text-secondary);
        font-size: var(--font-size-sm);
      }

      .card-arrow {
        position: absolute;
        right: var(--spacing-lg);
        top: 50%;
        transform: translateY(-50%);
        font-size: var(--font-size-lg);
        color: var(--text-tertiary);
        transition: all 0.3s ease;
      }
    }

    &:hover .card-arrow {
      transform: translateY(-50%) translateX(4px);
      color: var(--primary-color);
    }
  }
}

// 最近阅读
.recent-reading {
  background: var(--bg-primary);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  box-shadow: var(--shadow-sm);

  .section-title {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing-lg);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);

    &::before {
      content: '';
      width: 4px;
      height: 20px;
      background: var(--primary-color);
      border-radius: 2px;
    }
  }

  .recent-books {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: var(--spacing-lg);

    .book-item {
      display: flex;
      gap: var(--spacing-md);
      padding: var(--spacing-md);
      border-radius: var(--radius-md);
      cursor: pointer;
      transition: all 0.3s ease;

      &:hover {
        background: var(--bg-secondary);
        transform: translateY(-2px);
      }

      .book-cover {
        width: 60px;
        height: 80px;
        object-fit: cover;
        border-radius: var(--radius-sm);
        flex-shrink: 0;
      }

      .book-info {
        flex: 1;

        .book-title {
          font-size: var(--font-size-base);
          font-weight: 500;
          color: var(--text-primary);
          margin-bottom: var(--spacing-xs);
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
        }

        .book-author {
          color: var(--text-secondary);
          font-size: var(--font-size-sm);
          margin-bottom: var(--spacing-xs);
        }

        .read-progress {
          color: var(--primary-color);
          font-size: var(--font-size-xs);
          font-weight: 500;
        }
      }
    }
  }
}

// 对话框样式
.dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: var(--spacing-lg);

  .dialog {
    background: var(--bg-primary);
    border-radius: var(--radius-lg);
    max-width: 500px;
    width: 100%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: var(--shadow-lg);

    &.large {
      max-width: 700px;
    }

    .dialog-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: var(--spacing-lg);
      border-bottom: 1px solid var(--border-color);

      h3 {
        font-size: var(--font-size-lg);
        font-weight: 600;
        color: var(--text-primary);
      }

      .close-btn {
        background: none;
        border: none;
        font-size: 24px;
        color: var(--text-secondary);
        cursor: pointer;
        padding: 0;
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        transition: all 0.3s ease;

        &:hover {
          background: var(--bg-secondary);
          color: var(--text-primary);
        }
      }
    }

    .dialog-content {
      padding: var(--spacing-lg);
    }
  }
}

// 表单样式
.form-group {
  margin-bottom: var(--spacing-lg);

  label {
    display: block;
    margin-bottom: var(--spacing-sm);
    font-weight: 500;
    color: var(--text-primary);
  }

  input {
    width: 100%;
    padding: var(--spacing-md);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: var(--font-size-base);
    transition: all 0.3s ease;

    &:focus {
      outline: none;
      border-color: var(--primary-color);
      box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    }
  }
}

.form-actions {
  display: flex;
  gap: var(--spacing-md);
  justify-content: flex-end;
  margin-top: var(--spacing-xl);

  .btn {
    min-width: 80px;
  }
}

// 阅读历史列表
.history-list {
  max-height: 400px;
  overflow-y: auto;

  .history-item {
    display: flex;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.3s ease;

    &:hover {
      background: var(--bg-secondary);
    }

    &:not(:last-child) {
      margin-bottom: var(--spacing-md);
    }

    .history-cover {
      width: 50px;
      height: 66px;
      object-fit: cover;
      border-radius: var(--radius-sm);
      flex-shrink: 0;
    }

    .history-info {
      flex: 1;

      h4 {
        font-size: var(--font-size-base);
        font-weight: 500;
        color: var(--text-primary);
        margin-bottom: var(--spacing-xs);
      }

      p {
        color: var(--text-secondary);
        font-size: var(--font-size-sm);
        margin-bottom: var(--spacing-xs);
      }

      .read-time {
        color: var(--text-tertiary);
        font-size: var(--font-size-xs);
      }
    }
  }
}

.empty-state {
  text-align: center;
  padding: var(--spacing-2xl);
  color: var(--text-secondary);
}

// 设置样式
.settings-group {
  margin-bottom: var(--spacing-xl);

  h4 {
    font-size: var(--font-size-lg);
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid var(--border-color);
  }

  .setting-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-md) 0;

    label {
      font-weight: 500;
      color: var(--text-primary);
    }

    .font-size-control {
      display: flex;
      align-items: center;
      gap: var(--spacing-sm);

      button {
        width: 32px;
        height: 32px;
        border: 1px solid var(--border-color);
        background: var(--bg-secondary);
        border-radius: var(--radius-sm);
        cursor: pointer;
        transition: all 0.3s ease;

        &:hover {
          background: var(--primary-color);
          color: white;
          border-color: var(--primary-color);
        }
      }

      span {
        min-width: 60px;
        text-align: center;
        font-weight: 500;
      }
    }

    input[type="range"] {
      flex: 1;
      margin: 0 var(--spacing-md);
    }
  }
}

.theme-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-md);

  .theme-option {
    text-align: center;
    padding: var(--spacing-md);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.3s ease;

    &:hover {
      border-color: var(--primary-light);
    }

    &.active {
      border-color: var(--primary-color);
      background: rgba(59, 130, 246, 0.05);
    }

    .theme-preview {
      width: 40px;
      height: 30px;
      border-radius: var(--radius-sm);
      margin: 0 auto var(--spacing-sm);

      &.light { background: #ffffff; border: 1px solid #e5e7eb; }
      &.dark { background: #1a1a1a; }
      &.sepia { background: #f5f5dc; }
    }

    span {
      font-size: var(--font-size-sm);
      color: var(--text-secondary);
    }
  }
}

// VIP 套餐
.vip-packages {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-lg);

  @media (max-width: 768px) {
    grid-template-columns: 1fr;
  }

  .vip-package {
    border: 2px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;

    &:hover {
      border-color: var(--primary-color);
      transform: translateY(-4px);
      box-shadow: var(--shadow-md);
    }

    &.popular {
      border-color: var(--primary-color);
      background: rgba(59, 130, 246, 0.05);

      .popular-badge {
        position: absolute;
        top: -10px;
        left: 50%;
        transform: translateX(-50%);
        background: var(--primary-color);
        color: white;
        padding: 4px 12px;
        border-radius: 12px;
        font-size: var(--font-size-xs);
        font-weight: 500;
      }
    }

    h4 {
      font-size: var(--font-size-lg);
      font-weight: 600;
      color: var(--text-primary);
      margin-bottom: var(--spacing-md);
    }

    .price {
      font-size: var(--font-size-2xl);
      font-weight: 700;
      color: var(--primary-color);
      margin-bottom: var(--spacing-sm);
    }

    .original-price {
      color: var(--text-tertiary);
      font-size: var(--font-size-sm);
      text-decoration: line-through;
      margin-bottom: var(--spacing-md);
    }

    .benefits {
      text-align: left;

      p {
        color: var(--text-secondary);
        font-size: var(--font-size-sm);
        margin-bottom: var(--spacing-xs);
      }
    }
  }
}

// 图标样式 (使用CSS来模拟图标，实际项目中建议使用图标字体)
.icon-camera::before { content: '📷'; }
.icon-book::before { content: '📚'; }
.icon-wallet::before { content: '💰'; }
.icon-history::before { content: '📖'; }
.icon-settings::before { content: '⚙️'; }
.icon-crown::before { content: '👑'; }
.icon-comment::before { content: '💬'; }
</style> 